<!--
 * @Author: chenzechao
 * @Date: 2024-02-04 14:18:15
 * @LastEditors: chenzechao
 * @LastEditTime: 2024-02-06 17:33:51
 * @FilePath: \accesscontrolui\src\views\xtpz\attendance-group\components\free-classes.vue
 * @Description: 
-->
<template>
  <section class="panel">
    <section :class="`${block}`">
      <section :class="`${block}_header`">
        <section :class="`${block}_header_list`" v-for="(item, index) in 4">
          <div class="left">
            <span class="left-title">白班</span>
            <span>09:00~18:00 </span>
          </div>
          <div class="right">
            <i class="el-icon-edit" @click="hanldeAdd"></i>
            <i class="el-icon-delete" @click="hanldeDel"></i>
          </div>
        </section>
        <i class="el-icon-plus" @click="hanldeAdd"></i>
      </section>
      <section :class="`${block}_search`">
        <el-checkbox
          style="margin: 16px 0px"
          label="工作日不打卡记为旷工"
        ></el-checkbox>
        <section :class="`${block}_search_month`">
          <span>月份</span>
          <el-date-picker type="month" v-model="month" placeholder="请选择月份">
          </el-date-picker>
          <el-button type="primary" size="small">清除</el-button>
        </section>
      </section>
      <section :class="`${block}_body`">
        <section class="left_column">
          <section>人员</section>
          <section v-for="(item, index) in tableData">{{ item }}</section>
        </section>
        <section class="right_row">
          <div>
            <section
              class="right_row_data"
              v-for="(item, index) in daysInMonth"
            >
              <section
                class="week"
                :class="{
                  weekend: [0, 6].includes((index + firstDayOfWeek) % 7),
                }"
              >
                {{ weekList[(index + firstDayOfWeek) % 7] }}
              </section>
              <section class="day">{{ index + 1 }}</section>
            </section>
          </div>
          <div>
            <section class="right_row_wrap" v-for="(per, indexs) in tableData">
              <section class="right_row_list" v-for="(item, index) in 20">
                <el-popover trigger="click" placement="top-start" width="400">
                  <el-tabs v-model="activeName" @tab-click="handleClick" class="popover-tab">
                    <el-tab-pane label="班次排班" name="first">
                      <section class="wrap-item">
                        <section class="item">早班  07:00~12:00</section> <i class="el-icon-check" style="color: #43CF7C;"></i>
                      </section>
                      <section style="text-align: center;"><el-button size="small" type="primary">清除</el-button></section>
                      </el-tab-pane
                    >
                    <el-tab-pane label="周期排班" name="second"
                      >配置管理</el-tab-pane
                    >
                  </el-tabs>
                  <div slot="reference">1232</div>
                </el-popover>
              </section>
            </section>
          </div>
        </section>
      </section>
    </section>
    <ClassesDetails ref="ClassesRef" />
    <DeleteDialog ref="deleteRef" />
  </section>
</template>
<script>
import Panel from "@/components/panel.vue";
import Pagination from "@/components/Pagination/index.vue";
import DeleteDialog from "./delete-dialog.vue";
import ClassesDetails from "@/views/xtpz/classes/components/details.vue";
import { getMonthInfo } from "@/assets/common/js/utils/dataInfo.js";
export default {
  components: {
    DeleteDialog,
    ClassesDetails,
    Panel,
    Pagination,
  },
  watch: {
    month(nV, oV) {
      const { daysInMonth, firstDayOfWeek } = getMonthInfo(nV);
      this.daysInMonth = daysInMonth;
      this.firstDayOfWeek = firstDayOfWeek;
    },
  },
  data() {
    return {
      weekList: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      daysInMonth: 0,
      firstDayOfWeek: "",
      month: "",
      block: "free",
      tableData: ["张三", "李四"],
    };
  },
  methods: {
    hanldeAdd() {
      this.$refs.ClassesRef.open();
    },
    hanldeDel() {
      this.$refs.deleteRef.open();
    },
  },
  mounted() {
    // getMonthInfo()
  },
};
</script>
<style scoped lang="scss">
@import "../index.scss";
.weekend {
  background-color: rgba(252, 149, 182, 1) !important;
}
.popover-tab{
  // background-color: red;
  .wrap-item{
    margin-bottom: 6px;
    .item{
    background-color: rgba(255, 250, 209, 1);
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
    padding: 9px 15px;
  } 
  }

}
</style>
